<template>
    <div class="app-container" v-loading="loading">
        <el-button @click="back" type="primary" link :icon="Back" style="margin-bottom: 5px" >返回</el-button>
        <el-card  v-for="(item,index) in projectList" :key="index">
           <template #header>
                <div class="flex" style="justify-content: space-between;">
                    <p class="title">{{ item.projectName }}</p>
                    <el-button @click="downloadProject(item,1)" type="primary" link :icon="Download" :loading="item.downloading"  >下载</el-button>
                </div>
           </template>
           <div class="tag-container" v-for="(tag,cindex) in item.tags" :key="cindex">
               <p class="prenvnt-tag">
                    {{ tag.preventTagName }}
               </p>
               <div class="tag-item-container">
                    <div class="item-container " v-for="(tagItem,iindex) in tag.tagItem" :key="iindex" :class="{ 'full-tag': tagItem.del == 0 }" @click="preView(tagItem)">
                        <img src="@/assets/images/box-emtry.png" alt="" v-if="tagItem.del == 1">
                        <img src="@/assets/images/box-full.png" alt="" v-else>
                        <p class="ellipsis">{{ tagItem.documentTypeName }}</p>
                        <el-icon class="download-icon">
                            <Download v-if="tagItem.del == 0" :loading="tagItem.downloading" @click.stop="downloadProject(tagItem,2)" />
                        </el-icon>
                    </div>
               </div>
           </div>
        </el-card>
        <div class="fixed-add-btn flexC" @click="addProject">
            <el-icon><CirclePlus /></el-icon>
            <el-button type="text" link>新建项目</el-button>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, onUnmounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { cabinetBoxgDetail, ProjectTaskImages } from '@/api/project';
import { DownloadAdd } from '@/api/user';
import { Back, CirclePlus, Download } from '@element-plus/icons-vue';
import { ElLoading, ElMessage } from 'element-plus';
import { getCurrentInstance } from "vue";

const { proxy } = getCurrentInstance();

const route = useRoute();
const router = useRouter();
const loading = ref(false);
const projectList = ref([]);
onMounted(() => {
    getDetails();
})

const back = () => {
    router.back();
}
const addProject = () => {
    router.push({
        path:'/projectDigital/addProject',
        query:{
            cabinetId:route.query.cabinetId,
            boxId:route.query.boxId,
        }
    })
}
const getDetails = async () => {
    loading.value = true;
    let result = await cabinetBoxgDetail({projectIds: route.query.projectIds.split(',')});
    if(result.errorCode == 0){
        let arr = [], preventTag = [];
        for(let i=0;i<result.data.length;i++){
            let it = result.data[i];
            let arrIndex = arr.findIndex(item => item.projectId == it.projectId);
            if(arrIndex == -1){
                arr.push({...it, tags: [it]})
            }else {
                arr[arrIndex].tags.push(it)
            }
            if(!preventTag.includes(it.parentTypeName) && it.parentTypeName){
                preventTag.push(it.parentTypeName);
            }
        }
        
        for (let j = 0; j < arr.length; j++) {
            const jt = arr[j];
            let tagItem = jt.tags;
            jt.tags = preventTag.map(item => {
                return {
                    preventTagName: item,
                    tagItem: tagItem.filter(tag => tag.parentTypeName == item)
                }
            });
        }
        projectList.value = arr;
    }

    loading.value = false;

}

const preView = async (row) => {
    if(row.del == 1){
        return;
    }
    const loading = ElLoading.service({
        lock: true,
        text: '加载中...',
        background: 'rgba(0, 0, 0, 0.7)'
    });
    let res = await ProjectTaskImages({
        documentId: row.id,
        projectId: row.projectId
    })
    loading.close();
    if(res.errorCode == 0){
        proxy.$ViewerApi(res.data.map(item => {return item.imgPath}));
    }
}
// 下载 项目 zip
const downloadProject = async (item,type) => {
    item.downloading = true;
    let restult = await DownloadAdd({type:type == 1 ? 'project' : 'document', obj:type == 1 ? item.projectId : item.id});
    item.downloading = false;
    if(restult.errorCode == 0){
        ElMessage.success('下载成功,请在下载中心查看');
    }
}
</script>

<style lang="scss" scoped>
.app-container{
    .title{
        font-size: 20px;
        font-weight: bold;
        color: #333;
   }
   .tag-container{
        .prenvnt-tag{
            font-size: 16px;
            color: var(--el-color-primary);
            margin-bottom: 10px;
        }
        .tag-item-container{
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            .item-container{
                text-align: center;
                width: 110px;
                border: 1px solid #ccc;
                border-radius: var(--el-border-radius-base);
                padding: 10px 15px;
                position: relative;
                &.full-tag{
                    cursor: pointer;
                }
                img{
                    width: 50px;
                    height: 50px;
                }
                p{
                    margin-top: 5px;
                }
                .download-icon{
                    position: absolute;
                    // top: 10px;
                    padding: 10px;
                    // right: 10px;
                    top: 0;
                    right: 0;
                    font-size: 18px;
                    color: var(--el-color-primary);
                    font-weight: 600;
                    cursor: pointer;
                    z-index: 1;
                }
            }
        }
        &+.tag-container{
            margin-top: 40px;
        }
   }
   .fixed-add-btn{
        position: fixed;
        bottom: 20%;
        right: 0;
        border: 1px solid var(--el-color-primary);
        background: var(--el-color-primary);
        color: #fff;
        padding: 10px 15px;
        cursor: pointer;
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
        line-height: 1.3;
        .el-icon{
            font-size: 28px;
            margin-right: 5px;
        }
        :deep(.el-button){
            font-size: 22px;
            // width: 60px;
        }

        *{
            color: #fff;
            background: none;
        }

   }
}
</style>